<template>
  <div>商品价格: <input v-model="price"></div>
  <div>商品数量: <input v-model="count"></div>
  <div>商品总价: {{ total }}</div>
</template>

<script setup lang="ts">
import {computed, onMounted, onUnmounted, onUpdated, ref, watch} from "vue";

  const price = ref(1);
  const count = ref(1);

  //  计算属性，通过已有的状态去派生出一个新的状态
  const total = computed(() => {
    return price.value * count.value;
  })

  //sources为监听对象 cb为回调函数
  watch([price,count], ([newP,newC],[oldP,oldC]) => {
    console.log(newP,newC,oldP,oldC);
  })

  // watchSyncEffect->watchEffect->watchPostEffect

  // 钩子函数
  // 组件挂载
  onMounted(() => {

  });
  onUpdated(() => {

  });
  onUnmounted(() => {

  });
</script>

<style scoped>

</style>